<meta name="referrer" content="never">
<link rel="stylesheet" href="__CDN__/assets/addons/wxo/libs/element/element.css">
<style>
    #wxoConfig {
        background: #fff;
        border-radius: 10px 10px 0px 0px;
        color: #444;
        font-weight: 500;
        padding-bottom: 30px;
    }

    .display-flex {
        display: flex;
        align-items: center;
    }

    .platform-images {
        width: 60px;
        height: 60px;
        border-radius: 4px;
        position: relative;
        border: 1px solid #7438D5;
        margin-right: 10px;
        margin-bottom: 10px;
    }

    .el-image {
        width: 100%;
        height: 100%;
        border-radius: 4px;
    }

    .del-image-btn {
        position: absolute;
        width: 14px;
        height: 14px;
        line-height: 14px;
        text-align: center;
        border-radius: 50%;
        font-size: 12px;
        font-weight: 600;
        background: #fff;
        color: #7438D5;
        top: -8px;
        right: -8px;
        font-size: 16px;
    }

    .add-img {
        width: 60px;
        height: 60px;
        border: 1px dashed #E6E6E6;
        border-radius: 4px;
        justify-content: center;
    }

    .wxo-button-container {
        display: flex;
        justify-content: flex-end;
        padding: 0 10px;
    }

    .wxo-define-button {
        width: 70px;
        height: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;

        /* 主色 */

        background: #7536D0;
        border-radius: 4px;
        outline: none;
    }

    .el-radio__input.is-checked .el-radio__inner {
        border-color: #7536D0;
        background: #7536D0;
    }

    .el-radio__input.is-checked+.el-radio__label {
        color: #7536D0;
    }

    [v-cloak] {
        display: none
    }
</style>
<script src="__CDN__/assets/addons/wxo/libs/vue.js"></script>
<script src="__CDN__/assets/addons/wxo/libs/element/element.js"></script>
<div id="wxoConfig" v-cloak>
    <el-form :model="row" label-width="138px" role="form" method="POST" action="">
        {foreach $addon.config as $item}
            <el-form-item label="{$item.title}:">
                {switch $item.type}
                    {case string}
                        <el-input v-model="row.{$item.name}" name="row[{$item.name}]" placeholder="{$item.tip}" {$item.extend}></el-input>
                    {/case}
                    {case radio}
                        <div class="wx-type">
                            <el-input class="hidden" v-model="row.{$item.name}" name="row[{$item.name}]"></el-input>
                            <el-radio-group v-model="row.{$item.name}" name="row[{$item.name}]">
                                {foreach name="item.content" item="vo"}
                                    <el-radio label="{$key}">{$vo}</el-radio>
                                {/foreach}
                            </el-radio-group>
                        </div>            
                    {/case}
                    {case value="image" break="0"}{/case}
                    {case value="images"}
                    <div class="display-flex">
                        <div class="platform-images" v-if="row.{$item.name}">
                            <el-input class="hidden" v-model="row.{$item.name}" name="row[{$item.name}]"></el-input>
                            <el-image :src="row.{$item.name}" fit="contain">
                            </el-image>
                            <div class="del-image-btn" @click="delImg('{$item.name}')">
                                <i class="el-icon-error"></i>
                            </div>
                        </div>
                        <div class="add-img display-flex" @click="addImg('{$item.name}')" v-if="!row.{$item.name}">
                            <i class="el-icon-plus"></i>
                        </div>
                    </div>
                    {/case}
                {/switch}
            </el-form-item>
        {/foreach}
        <el-form-item label="服务器地址:">
            <el-input value="{:request()->domain() . '/addons/wxo'}" disabled></el-input>
        </el-form-item>
        <div class="form-group layer-footer">
            <label class="control-label col-xs-12 col-sm-2"></label>
            <div class="col-xs-12 col-sm-8">
                <button type="submit" class="btn btn-success btn-embossed">{:__('OK')}</button>
            </div>
        </div>
    </el-form>
</div>
<script>
    var row = {};
        {foreach $addon.config as $item}
            row.{$item.name} = '{$item.value}'
        {/foreach}
    var wxoConfig = new Vue({
        el: "#wxoConfig",
        data() {
            return {
                row: row,
            }
        },
        mounted() {},
        methods: {
            addImg(field) {
                console.log(field)
                let that = this;
                Fast.api.open("general/attachment/select?multiple=false", "选择", {
                    callback: function (data) {
                        that.row[field] = Fast.api.cdnurl(data.url);
                    }
                });
                return false;
            },
            delImg(field) {
                this.row[field] = '';
            },
        },

    })
</script>